<!-- 二级路由组件展示区域 -->
<template>
    <router-view v-slot="{ Component }">
        <transition name="fade">
            <component :is="Component" v-if="flag" />
        </transition>
    </router-view>
    <!-- <router-view></router-view> -->
</template>

<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';
// 刷新按钮
import useSettingStore from '../../../store/modules/setting';
let settingStore = useSettingStore()
// 控制当前组件是否销毁重建
let flag = ref(true)

// 监听仓库中的refsh是否发生变化 如果发生变化 则说明点击了刷新按钮
watch(() => settingStore.refsh, () => {
    // 点击刷新 按钮 路由销毁组件
    flag.value = false
    // 刷新完毕 重建组件 nextTick 更新完dom后再次重建
    nextTick(() => {
        flag.value = true
    })
})
</script>

<style lang="scss" scoped>
.fade-enter-from {
    opacity: 0;
}

.fade-enter-active {
    transition: all 1s;
}

.fade-enter-to {
    opacity: 1;
}
</style>